<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="信息搜索">
						<el-input v-model="state.param.keyword" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon> 重 置
						</el-button>
						<el-button type="primary" @click="onOpenAddMenu()">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData">
						<el-table-column label="ID" width="90" show-overflow-tooltip>
							<template #default="scope">
								<span class="ml10">{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="path" label="来源名称" show-overflow-tooltip>
							<template #default="scope">
								<span class="ml10">{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="开通渠道" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="来源" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ scope.row.experience }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" show-overflow-tooltip width="140">
							<template #default="scope">
								<el-button  text type="primary" @click="onOpenEditMenu('edit', scope.row)">编辑</el-button>
								<el-button  text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</section>
			</el-card>
		</div>
		<addSourceDialog ref="addSourceDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { levelListData } from "/@/types/member";
import { levelList } from '/@/api/member';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
// 引入组件
const addSourceDialog = defineAsyncComponent(() => import('/@/views/member/source/addSourceDialog.vue'));

// 定义变量内容
const addSourceDialogRef = ref();
const state = reactive({
	param:{
		keyword:""
	},
	tableData: [] as levelListData[],
	loading: true,
});

// 页面加载时
onMounted(() => {
	getTableData();
});

// 获取路由数据，真实请从接口获取
const getTableData = async () => {
	state.loading = true;
	let res = await levelList(state.param);
	state.tableData = res.results;
	state.loading = false;
};
// 打开新增菜单弹窗
const onOpenAddMenu = (type: string) => {
	addSourceDialogRef.value.openDialog(type);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: RouteRecordRaw) => {
	addSourceDialogRef.value.openDialog(type, row);
};
// 删除当前行
const onTabelRowDel = (row: RouteRecordRaw) => {
	ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			ElMessage.success('删除成功');
			getTableData();
			//await setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
		})
		.catch(() => {});
};
</script>
<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>
